<template>
  <div id="movie-container">
    <div class="movieContainerBox">
        <!-- 左半部分——关于电影 -->
        <div class="left-content">
            <!-- 正在热映 -->
            <div class="nowPlay">
                <!-- 第一行标题和切换按钮 -->
                <div class="slide">
                    <h2 class="title">正在热映</h2>
                    <!-- 切换按钮 -->
                    <div class="slideControler">
                        <span class="lbtn" @click="lbtn"><a></a></span>
                        <span class="rbtn" @click="rbtn"><a></a></span>
                    </div>
                    <!-- 切换tips -->
                    <div class="slideTips">
                        <span class="slideIndex">{{1}}</span> / <span class="slidePage">4</span>
                    </div>
                </div>
                <!-- 正在热映的电影items -->
                <div class="nowPlayContent">
                    <!-- 10个项目的大框一长条 -->
                    <div class="nowPlayList">
                        <!-- 每个单独的电影 -->
                            <div v-for="(item) in nowPlayList" :key="item.mid" class="nowPlayItems">
                                <div class="mpic">
                                    <img :src={mpic} alt="" class="Item_pic">
                                </div>
                                <router-link to="/dj/movie" class="Item_name">{{item.mname}}</router-link>
                                <div class="Item_score">
                                    <el-rate v-model="value" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                                    <!-- <span>暂无评分</span> -->
                                </div>

                                <button class="todesc">查看详情</button>
                            </div>
                        </div>
                </div>
            </div>
            <div class="recentPlayMovie">
                <h2 class="title">最近热门电影</h2>
                    <div class="recentPlayMovieContent">
                        ……
                    </div>
            </div>
            <div class="recentPlayTV">
                <h2 class="title">最近热门电视剧</h2>
                    <div class="recentPlayTVContent">
                        ...
                    </div>
            </div>
            <div class="hotRecommen">
                <h2 class="title">热门推荐</h2>
                    <div class="hotRecommenContent">
                        ...
                    </div>
            </div>
            <div class="filmReview">
                <h2 class="title">最受欢迎的影评</h2>
                    <div class="hotRecommenContent">
                        ...
                    </div>
            </div>
        </div>
        <div class="right-content">
            <div class="rank">
                <h2 class="title">一周口碑榜</h2>
                <div v-for="(item,index) in rankList" :key="item.id+1" class="rankItem">
                    {{index+1}}<router-link :to="'/detail'" calss="rankLink">{{item.title}}</router-link>
                </div>
            </div>
            <div class="fans">
                <h2 class="title">关注我们</h2>
                <div class="fansList">
                    <div class="fansItem">
                        <div class="fansBgi sina"></div>
                        <div><a href="#">微博</a></div>
                    </div>
                    <div class="fansItem">
                        <div class="fansBgi wechat"></div>
                        <div><a href="#">微信</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script setup>
    import {onMounted,getCurrentInstance,ref} from 'vue';
    let {proxy} = getCurrentInstance()
    let nowPlayList = ref([])
    let recentPlayList=ref([])
    let rankList=ref([])
    let value=ref(3.5)
    let mpic=ref('')

    onMounted(()=>{
        proxy.$axios.get('/dj/getmovie').then((res)=>{
            nowPlayList.value=res.data
            console.log(nowPlayList.value[0].mpic,'vallue')
            // value.value=nowPlayList.value.score
            // console.log(value.value,'value')
            mpic.value=res.data.mpic
          
        })
    })

    let rbtn =()=>{
        // for (i=0;i<4;i++){
            
        // }
        const box=document.querySelector('.nowPlayList');
        console.log(box)
    }

    let lbtn =()=>{
        const box=document.querySelector('.nowPlayList');
        // box.style.transform='translate(0)'
    }

</script>

<style>

</style>